import React, { useState, useMemo } from 'react';
import ReactCanvasNest from 'react-canvas-nest';
import { Input, Form, Button, message } from 'antd';
import { useData, rule } from '../common/formData';
import { login, register } from '../api/login';
import { useNavigate } from 'react-router-dom';
import { useNotice } from '../store/hooks/useNotice';
const LoginView = () => {
  const [form] = Form.useForm();
  const navigate = useNavigate();
  const [isLogin, setIsLogin] = useState(true);
  const { uid, username, setUsername, setUid } = useNotice();
  const initArr = [
    {
      label: '用户名',
      name: 'username',
      rules: [rule('用户名')],
      slot: <Input placeholder="请输入用户名" />,
    },
    {
      label: '密码',
      name: 'pwd',
      rules: [rule('密码')],
      slot: <Input.Password placeholder="请输入密码" />,
    },
  ];
  const [formData, setFormData] = useData({
    initArr,
  });
  useMemo(() => {
    if (isLogin) {
      setFormData([...initArr]);
    } else {
      setFormData([
        ...initArr,
        ...[
          {
            label: '确认密码',
            name: 'cpwd',
            rules: [rule('确认密码')],
            slot: <Input.Password placeholder="请确认密码" />,
          },
        ],
      ]);
    }
  }, [isLogin]);
  const handleOk = (data) => {
    if (isLogin) {
      login({ user_name: data.username, user_pwd: data.pwd }).then((res) => {
        if (res.data.code == 0) {
          console.log(res);
          localStorage.setItem('token', res.data.result.token);
          message.success('登录成功');
          location.href = 'http://127.0.0.1:5173/';
          // navigate('/');
        } else {
          message.warning('登录失败，请检查用户名密码是否正确');
        }
      });
    } else {
      register({
        user_name: data.username,
        user_pwd: data.pwd,
        user_type: 1,
      }).then((res) => {
        console.log(res);
        if (res.data.code == 0) {
          message.success('注册成功');
        } else {
          message.error('注册失败，用户名已存在');
        }
      });
    }
  };
  const toggle = () => {
    console.log('toggle');
    setIsLogin(!isLogin);
  };
  return (
    <div
      style={{
        height: '100vh',
        boxSizing: 'border-box',
        background: 'black',
        // overflow: 'hidden',
      }}
    >
      <ReactCanvasNest
        className="canvasNest"
        config={{
          pointColor: ' 255, 255, 255 ',
          lineColor: '255,255,255',
          pointOpacity: 0.5,
          pointR: 2,
          count: 100,
        }}
        style={{ zIndex: 0 }}
      />

      <div className="login-form-container">
        <h1 style={{ color: 'white' }}>{isLogin ? 'Login' : 'Register'}</h1>

        <Form
          form={form}
          labelCol={{ span: 4 }}
          wrapperCol={{ span: 18 }}
          layout="horizontal"
          onFinish={handleOk}
        >
          {formData.map((item, index) => (
            <Form.Item key={index} {...item}>
              {item.slot}
            </Form.Item>
          ))}

          <Form.Item>
            {isLogin ? (
              <div className="login-btn-container">
                <Button type="primary" htmlType="submit">
                  登录
                </Button>
                &nbsp;&nbsp;&nbsp;&nbsp;
                <Button htmlType="button" onClick={toggle}>
                  前往注册
                </Button>
              </div>
            ) : (
              <div className="login-btn-container">
                <Button htmlType="button" onClick={toggle}>
                  返回登录
                </Button>
                &nbsp;&nbsp;&nbsp;&nbsp;
                <Button type="primary" htmlType="submit">
                  注册
                </Button>
              </div>
            )}
          </Form.Item>
        </Form>
      </div>
    </div>
  );
};

export default LoginView;
